import React, { useState } from 'react';
import { Form, Input, Button, Checkbox, Rate, Switch, Select, List } from 'antd';
import styles from './style.less';

const { TextArea } = Input;
const { Item } = Form;

const settingList = [
  {
    label: '显示防伪标签',
  },
  {
    label: '显示密码',
  },
  {
    label: '显示卡包',
  },
  {
    label: '是否开启繁简转换',
  },
];

const SettingForm = () => {
  const [form] = Form.useForm();

  const getSwitchItem = (item: { label: string }) => {
    const { label } = item;

    return (
      <Item label={label} className={styles.formItem}>
        <Switch />
      </Item>
    );
  }

  return (
    <div className={styles.settingForm}>
      <Form form={form}>
        <List
          size="small"
          dataSource={settingList.map(getSwitchItem)}
          renderItem={item => <List.Item>{item}</List.Item>}
        />
      </Form>
    </div>
  );
}

export default SettingForm;
